<template>
    <div>
        <div class="banner" @click="handleBannerClick">
            <img class="banner-img" :src="bannerImg" alt="">
            <div class="banner-info">
                <div class="banner-tittle">{{this.sightName}}</div>
                <div class="banner-num">
                    <!-- iconfont图标库 -->
                    <span class="iconfont banner-icon">&#xe632;</span> {{this.gallaryImgs.length}}
                </div>
            </div>
        </div>
        <fade>
            <common-gallery :imgs='gallaryImgs' v-show="showGallery" @close='handlesGalleryClose'></common-gallery>
        </fade>
    </div>
</template>
<script>
    /*引入公共画廊轮播图组件*/
    import CommonGallery from 'common/gallery/Gallery.vue'
    import fade from 'common/fade/fade.vue'
    export default {
        name: 'detailBanner',
        props: {
            sightName: String,
            bannerImg: String,
            gallaryImgs: Array
        },
        data() {
            return {
                showGallery: false
            }
        },
        methods: {
            handleBannerClick() {
                this.showGallery = true;
            },
            handlesGalleryClose() {
                this.showGallery = false;
            }
        },
        components: {
            CommonGallery,
            fade
        }
    }
</script>
<style lang="less" scoped>
    .banner {
        /* 轮播图区域*/
        position: relative; // 防止页面抖动
        overflow: hidden;
        height: 0;
        padding-bottom: 55%;
        .banner-img {
            width: 100%;
        }
        /*标题区域*/
        .banner-info {
            display: flex;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            line-height: 0.6rem;
            color: #ffffff;
            background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
            .banner-tittle {
                flex: 1;
                font-size: 0.32rem;
                padding: 0 0.2rem;
            }
            .banner-num {
                height: 0.32rem;
                margin-top: 0.14rem;
                padding: 0 0.4rem;
                line-height: 0.32rem;
                border-radius: 0.2rem;
                background: rgba(0, 0, 0, 0.8);
                font-size: 0.24rem;
                .banner-icon {
                    font-size: 0.24rem;
                }
            }
        }
    }
</style>


